<template>
	<view>
		<view class="wrap">
			<u-row gutter="40">
				<u-col span="1">
					<view v-if="info.status==0&&99" class="demo-layout" style="display: flex; align-items: center; ">
						<u-icon name="checkmark-circle-fill" color="#3CBCA3" size="80">
						</u-icon>
					</view>
					<view v-else class="demo-layout" style="display: flex; align-items: center; ">
						<u-icon name="checkmark-circle-fill" color="#FC9153" size="80">
						</u-icon>
					</view>
				</u-col>
				<u-col span="4">
					<view class="center ml-20 demo-layout size-50 " style="width: 130px; ">
						{{info.status_text?info.status_text:'暂无'}}
					</view>
				</u-col>

				<u-col span="5" v-if="info.driver">
					<view class="demo-layout ml-100 " style="display: flex; align-items: center; ">
						<view class="">
							司机尾号
						</view>
					</view>
				</u-col>
				<u-col span="1" v-if="info.driver">
					<view class="center demo-layout mr-20">
						<view class="">
							{{info.driver.mobile?info.driver.mobile.substr(-4):"6666"}}
						</view>
					</view>
				</u-col>

			</u-row>
			<view class="center" v-show="info.status==0">
				我们将在几分钟内为您安排工作人员
			</view>
			<view class="center" v-show="info.status==1">
				司机已接单，正在赶来途中~
			</view>
			<view class="center" v-show="info.status==2">
				司机赶来中~
			</view>
			<view class="center" v-show="info.status==3||info.status==99">
				订单已完成，祝一路顺风
			</view>
		</view>
		<!-- status -1=已取消,0=呼叫中,1=已接单,2=进行中,3=待支付,
		4=司机已到达,5=预约单待司机出发,99=已完成' -->
		<view class="wrap" v-if="!info.status==0 ">
			<view class="" style="border-bottom: solid 2px #eeeeee;"></view>
			<u-row gutter="40" v-if="info.driver">
				<u-col span="1">
					<view class="demo-layout" style="display: flex; align-items: center; ">
						<img src="/static/driver.png"
							style="width:95rpx; height: 95rpx; background-color: #ebebeb; border-radius: 55rpx; padding: 10rpx;"
							alt="22">
					</view>
				</u-col>
				<view style="margin-left: 150rpx; ">
					<u-col span="4">
						<view class="demo-layout size-35"
							style="display: flex; align-items: center; justify-content: center; ">
							{{info.driver.nickname?info.driver.nickname:"123****3211"}}
						</view>
					</u-col>
					<u-col span="5">
						<view class="demo-layout center">
							<view class="">
								<u-rate active-color="#F2CB51" :disabled="true" size="40" :count="count"
									v-model="info.driver.score">
								</u-rate>
							</view>
						</view>
					</u-col>
				</view>

				<u-col span="1">
					<view class="center demo-layout ml-100" @click="call()">
						<u-icon name="phone-fill" color="#3CBCA3" size="50"></u-icon>
					</view>
				</u-col>
			</u-row>
			<view class="" style="border-bottom: solid 2px #eeeeee;"></view>
		</view>
		<view class="flex_l">
			<view class="bg-green radius mt-10 ml-20" style="width: 16rpx;height: 16rpx;"></view>
			<view class="size-34 ml-30 mt-20 bold">
				{{info.start_address?info.start_address:"西湖山庄"}} <text class="u-m-l-20">(接车地点)</text>
				<view class="size-24 mt-10 bold">
					{{info.start?info.start:"西湖山庄"}}
				</view>
			</view>
		</view>
		<view class="flex_l" v-show="info.drive_type== '代驾订单' ">
			<view class="bg-red radius mt-10 ml-20" style="width: 16rpx;height: 16rpx;"></view>
			<view class="size-34 ml-30 mt-30 bold">
				{{info.end_address?info.end_address:"西湖山庄"}} <text class=" u-m-l-20">(目的地)</text>
				<view class="size-24 mt-10 bold">
					{{info.end?info.end:"西湖山庄"}}
				</view>
			</view>
		</view>
		<view class="bold gray-2 ml-50 mt-40 mb-20">
			接车时间 <text
				class="ml-100 ">{{$u.timeFormat(info.createtime, 'mm-dd  hh:MM')?$u.timeFormat(info.createtime, 'mm-dd  hh:MM')+' - '+$u.timeFormat(info.createtime+3600, 'hh:MM'):"11-13 12:00-15:00"}}</text>
		</view>
		<!-- 订单时间线 -->
		<view class="" style="border-bottom: solid 5px #eeeeee;"></view>
		<view class="mlr-50 mt-30">
			<u-time-line>
				<u-time-line-item nodeTop="2">
					<template v-slot:node>
						<view v-if="info.status== 0" class="u-node colors" style="background: #19be6b;">
							<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
						</view>
						<view v-else class="u-node colors" style="background: #c7c7c7;">
							<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">已下单</view>
							<!-- <view class="u-order-time">2019-05-08 12:12</view> -->
						</view>
					</template>
				</u-time-line-item>
				<!-- 司机接单 -->
				<u-time-line-item>
					<template v-slot:node>
						<view v-if="info.status== 1" class=" u-node" style="background: #19be6b;">
							<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
						</view>
						<view v-else class=" u-node" style="background: #c7c7c7;">
							<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">已为您安排司机</view>
							<!-- <view class="u-order-time">2019-12-06 22:30</view> -->
						</view>
					</template>
				</u-time-line-item>
				<!-- 泊车中 -->
				<u-time-line-item>
					<template v-slot:node>
						<view v-if="info.status==2||info.status==4" class="u-node" style="background: #19be6b;">
							<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
						</view>
						<view v-else class="u-node" style="background: #c7c7c7;">
							<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">进行中</view>
							<!-- <view class="u-order-time">2019-12-06 22:30</view> -->
						</view>
					</template>
				</u-time-line-item>
				<!-- 完成泊车 -->
				<u-time-line-item>
					<template v-slot:node>
						<view v-if="info.status==3" class="u-node" style="background: #19be6b;">
							<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
						</view>
						<view v-else class="u-node" style="background: #c7c7c7;">
							<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">订单完成</view>
							<!-- <view class="u-order-time">2019-12-06 22:30</view> -->
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<view class="" style="border-bottom: solid 5px #eeeeee;"></view>
		<!-- 泊车人信息 -->
		<view class="mlr-50">
			<view class="flex mt-30">
				<text class="gray-2">联系人</text>
				<text>{{info.car_name}}</text>
			</view>
			<view class="flex mt-20">
				<text class="gray-2">手机号</text>
				<text>{{info.car_phone}}</text>
			</view>
			<view class="flex mt-20 mb-30">
				<!-- 车牌号 车名 -->
				<text class="gray-2">车辆信息</text>
				<text>{{info.car_type+'-'+info.car_type}}</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="" style="border-bottom: solid 5px #eeeeee;"></view>
		<view class="mlr-50">
			<view class=" mt-30" style="display: flex; ">
				<view class="gray-2">订单编号</view>
				<view class="mr-96" style="position: absolute; right: 0;">{{info.id}}</view>
				<view class="mr-50" style="position: absolute; right: 0;" @click="paste()">
					<u-icon size="38" color="#3CBCA3" name="file-text"></u-icon>
				</view>
			</view>
			<view class="flex mt-20 mb-30">
				<text class="gray-2">订单创建时间</text>
				<text>{{$u.timeFormat(info.createtime, 'yyyy-mm-dd  MM:ss')}}</text>
			</view>
		</view>
		<view class="u-m-t-60 pb-40">
			<view v-if="info.status==99" class="mlr-36">
				<view class="border-sty3">
					<text class="text1">订单已完成</text>
				</view>
			</view>
			<view v-else-if="info.status==3" class="mlr-36" @click="pay()">
				<view class="border-sty1">
					<text class="text1">去支付</text>
				</view>
			</view>
			<view v-else class=" mlr-36" @click="cancle" style="margin-left: 350rpx; margin-right: 250rpx;  ">
				<view class="border-sty">
					<text class="text1">取消订单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// props: {
		// 	info: {
		// 		type: Object //-2超时 0=呼叫中
		// 	},
		// 	huoyun: {
		// 		type: Boolean,
		// 		default: false
		// 	}
		// },
		data() {
			return {
				id: '', //订单id
				info: {}, //-2超时，-1=已取消,0=呼叫中,1=已接单,2=进行中,3=待支付,4=司机已到达,5=预约单司机待出发,99=已完成'
				timer1: null, //排队超时
				arr1: [0, 1, 2, 4, 5, 3], //需要定时器
				arr2: [-2, -1, 99], //清除定时
				arr3: [1, 2, 3, 4, 5, 99], //显示司机组件
				ispay: false, //支付弹窗
				// 地图
				latitude: '',
				longitude: '',
				polyline: [],
				//评分
				count: 5, //司机评分默认颗数
				value: 4,
				copy: "",
				phone: '', //司机电话
				timers: null, //取消订单定时器

			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			this.copy = option.id
		},

		// onReady() {
		// 	uni.setNavigationBarTitle({
		// 		title: this.xiuname
		// 	})
		// },
		onShow() {
			this.init();

		},
		onUnload() {
			clearInterval(this.timer1)
		},
		onHide() {
			clearInterval(this.timer1)
			clearInterval(this.timers)
			this.timers = null;
		},
		methods: {
			//支付页
			pay() {
				uni.navigateTo({
					url: '/pages/home/detailpay?id=' + this.id
				})
			},
			//司机电话
			call() {
				uni.makePhoneCall({
					phoneNumber: this.phone, //仅为示例
				});
				console.log("司机电话", this.phone);
			},
			// 取消订单
			cancle() {
				uni.navigateTo({
					url: '/pages/home/detail?id=' + this.id
				})
				// this.$http('/addons/ddrive/order/cancel', {
				// 	order_id: this.info.id
				// }, "POST").then(() => {
				// 	this.$emit('update')
				// })
				// uni.showToast({
				// 	title: '取消成功',
				// 	icon: 'none',
				// 	duration: 1500
				// })
				// this.timers = setInterval(() => {
				// 	uni.navigateTo({
				// 		url: '/pages/home/index'
				// 	})
				// }, 2000);
			},
			//订单信息
			init() {
				uni.showLoading({ // title: '加载中'
				});
				let _this = this
				this.$http('/addons/ddrive/order/info', {
					order_id: this.id
				}, "POST").then(data => {
					uni.hideLoading();
					this.info = data,
						this.phone = data.driver.mobile,
						// 动态title
						uni.setNavigationBarTitle({
							title: data.status_text
						})
					if (this.arr1.includes(this.info.status * 1)) {
						this.timer1 = setInterval(() => {
							this.update()
						}, 5000)
					}
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							console.log('当前位置的经度1：' + res.longitude);
							console.log('当前位置的纬度1：' + res.latitude);
							_this.longitude = res.longitude
							_this.latitude = res.latitude
							_this.polyline = []
							// _this.getLine()
						}
					});
				})
			},
			update() {
				this.$http('/addons/ddrive/order/info', {
					order_id: this.id
				}, "POST").then(data => {
					this.info = data
					if (this.arr2.includes(this.info.status * 1)) {
						clearInterval(this.timer1)
					}
				})
			},
			// getLine() {
			// 	var that = this;
			// 	var key = '4212e2ed80856520bc1a2e44153333fc';
			// 	var myAmapFun = new amapFile.AMapWX({
			// 		key: key
			// 	});
			// 	// 1 还没接到人  所在地到起点，起点到终点
			// 	let arr = ['0', '1', '5', '4']
			// 	if (arr.includes(this.info.status)) {
			// 		this.lineData(myAmapFun, this.longitude + ',' + this.latitude, this.info.start_longitude + ',' + this
			// 			.info.start_latitude,
			// 			"#ff4b4e")
			// 		this.lineData(myAmapFun, this.info.start_longitude + ',' + this.info.start_latitude, this.info
			// 			.end_longitude + ',' +
			// 			this.info.end_latitude,
			// 			"#28d32e")
			// 	}
			// 	// 2 途中  所在地到终点
			// 	if (this.info.status == 2) {
			// 		this.lineData(myAmapFun, this.info.start_longitude + ',' + this.info.start_latitude, this.longitude +
			// 			',' + this.latitude,
			// 			"#c6c6c5")
			// 		this.lineData(myAmapFun, this.longitude + ',' + this.latitude, this.info.end_longitude + ',' + this
			// 			.info.end_latitude,
			// 			"#28d32e")
			// 	}
			// 	// 3 完成、取消、待支付：起点到终点
			// 	let arr1 = ['-2', '-1', '3', '99']
			// 	if (arr1.includes(this.info.status)) {
			// 		this.lineData(myAmapFun, this.info.start_longitude + ',' + this.info.start_latitude, this.info
			// 			.end_longitude + ',' +
			// 			this.info.end_latitude,
			// 			"#28d32e")
			// 	}
			// },
			lineData(myAmapFun, origin, destination, color) {
				let that = this
				myAmapFun.getDrivingRoute({
					origin,
					destination,
					success(data) {
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							var points = [];
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						that.polyline.push({
							points: points,
							color,
							width: 10,
							arrowLine: true,
						})
					},
					fail(info) {
						console.log(444444, info);
					}
				});
			},
			toNav(status) {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						console.log(res.platform);
						if (res.platform == 'android') {
							if (status == 2) {
								plus.runtime.openURL("androidamap://navi?sourceApplication=ddcar&lat=" + _this.info
									.end_latitude + "&lon=" + _this.info
									.end_longitude + "&dev=0&style=2")
							} else {
								plus.runtime.openURL("androidamap://navi?sourceApplication=appname&lat=" + _this
									.info.start_latitude + "&lon=" +
									_this.info.start_longitude + "&dev=0&style=2")
							}
						} else if (res.platform == 'ios') {
							if (status == 2) {
								plus.runtime.openURL("iosamap://navi?sourceApplication=ddcar&lat=" + _this.info
									.end_latitude + "&lon=" + _this.info
									.end_longitude + "&dev=0&style=2")
							} else {
								plus.runtime.openURL("iosamap://navi?sourceApplication=appname&lat=" + _this.info
									.start_latitude + "&lon=" +
									_this.info.start_longitude + "&dev=0&style=2")
							}
						}
					}
				})

			},
			toAnquan() {
				uni.navigateTo({
					url: '/pages/home/security'
				})
			},
			// 复制
			paste(value) {
				uni.setClipboardData({
					data: this.copy,
				});
				if (this.copy) {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '不支持',
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-primary-hover {
		background: linear-gradient(to right, #00b6b4, #00d496) !important;
	}

	.border-sty {
		width: 350rpx;
		height: 88rpx;
		border-radius: 50px;
		background-color: #3CBCA3;
		display: flex;
		align-items: center;
		justify-content: center;

		.text1 {
			font-size: 32rpx;
			color: #ffff;
		}
	}

	.border-sty1 {
		width: 100%;
		height: 88rpx;
		border-radius: 50px;
		background-color: #FC9153;
		display: flex;
		align-items: center;
		justify-content: center;

		.text1 {
			font-size: 32rpx;
			color: #ffff;
		}
	}

	.border-sty3 {
		width: 100%;
		height: 88rpx;
		border-radius: 50px;
		background-color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;

		.text1 {
			font-size: 32rpx;
			color: #ffff;
		}
	}



	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.u-node {
		width: 34rpx;
		height: 34rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
